<template>
  <div>
    <h3>{{ state.count }}</h3>
    <button @click="addCount">+++++++</button>
  </div>
</template>

<script>
import { reactive, readonly } from 'vue'

export default {
  setup() {
    const original = reactive({ count: 0 })
    // 把reactive数据进行的只读处理，此时state对象中的数据是只读的
    // 普通数据它是视图不更新，但数据会更新
    // const state = {count:1}
    // readonly，数据不更新，视图不更新
    const state = readonly(original)

    const addCount = () => {
      state.count++
      console.log(state.count)
    }

    return {
      state,
      addCount
    }
  }
}
</script>

<style lang="scss"></style>
